index.html:
<section class="sec_about text-center py-5" id="about">
<div class="container">
<h1 class="fw-bold">Welcome to The Espresso Emporium</h1>
<p class="py-3">
At The Espresso Emporium, we're dedicated to providing a truly
exceptional coffee experience. Our passion for coffee is at the heart
of everything we do.
</p>
</div>
<div class="sec_about-pic row pt-4">
<div class="sec_about-pic1 col">
<img src="./image/exquisite.png" alt="exquiste" />
</div>
<div class="sec_about-pic2 col">
<img src="./image/sumptuous.png" alt="sumptuous" />
</div>
<div class="sec_about-pic3 col">
<img src="./image/aromatic.png" alt="aromatic" />
</div>
</div>
</section>
style.css:
.sec_about {
overflow-x: hidden;
}
.sec_about-pic img {
padding: 40px;
}
.sec_about-pic1,
.sec_about-pic3 {
background-color: black;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.sec_about-pic2 {
background-color: #f6f6f6;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
index.html:
<section class="sec_product container text-center pb-5" id="product">
<h2>Our Coffee Selection</h2>
<p class="py-4">
Discover a world of flavors with our diverse coffee offerings. Each cup
is a journey, and we're excited to be your guide. Here's a glimpse of
what you'll find at The Espresso Emporium:
</p>
<!-- 使用貓頭鷹輪播，會在實作jQuery的時候教學 -->
<div class="owl-carousel owl-theme">
<div class="item">
<img src="./image/Espresso Shots.png" alt="Espresso Shots" />
<h3>Espresso Shots</h3>
<h4>For those who appreciate the pure and bold essence of coffee.</h4>
</div>
<div class="item">
<img src="./image/Iced Coffee.png" alt="Iced Coffee" />
<h3>Iced Coffee</h3>
<h4>Perfect for a refreshing pick-me-up on a warm day.</h4>
</div>
<div class="item">
<img src="./image/Cold Brew.png" alt="Cold Brew" />
<h3>Cold Brew</h3>
<h4>Smooth, bold, and ideal for the coffee purist.</h4>
</div>
<div class="item">
<img src="./image/Lattes.png" alt="Lattes" />
<h3>Lattes</h3>
<h4>
Creamy and smooth, with various flavor options to suit your taste.
</h4>
</div>
<div class="item">
<img src="./image/Mochas.png" alt="Mochas" />
<h3>Mochas</h3>
<h4>A chocolate-infused treat for your coffee cravings.</h4>
</div>
<div class="item">
<img src="./image/Cappuccinos.png" alt="Cappuccinos" />
<h3>Cappuccinos</h3>
<h4>A delightful balance of espresso, steamed milk, and foam.</h4>
</div>
<div class="item">
<img src="./image/Tea Selection.png" alt="Tea Selection" />
<h3>Tea Selection</h3>
<h4>
For tea lovers, we offer a range of teas for a different kind of
delight.
</h4>
</div>
</div>
</section>
index.html:
<section class="sec_location text-center pb-5" id="location">
<h2>Where is The Espresso Emporium?</h2>
<!-- 嵌入google地圖(這裡假設定位在台北市101) -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.030752872954!2d121.55863992695312!3d25.03303040000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442abb6625e6f89%3A0xf3ab83833fbea1dd!2z5Y-w5YyXMTAxL-S4luiyvw!5e0!3m2!1szh-TW!2stw!4v1697122609647!5m2!1szh-TW!2stw"
width="600"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
class="pt-4"
></iframe>
</section>
style.css:
index.html:
<section class="sec_contact text-center container pb-4" id="contact">
<h2>Contact Us!</h2>
<form action="" method="POST" class="row pt-4">
<div class="col-12">
<input
id="text"
type="text"
name="name"
placeholder="Your Name"
required
/>
</div>
<div class="col-12 py-4">
<input
id="email"
type="email"
name="email"
placeholder="Your Email"
required
/>
</div>
<div class="col-12">
<textarea
name="suggestion"
id="suggestion"
cols="30"
rows="10"
placeholder="Typing your message here..."
required
></textarea>
</div>
<div class="col-12 pt-4">
<button type="submit">SEND</button>
</div>
</form>
</section>
style.css:
input {
width: 602px;
height: 56px;
border: none;
border-radius: 32px;
background: #f1f1f1;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 20px;
}
textarea {
width: 602px;
border-radius: 32px;
border: none;
background: #f1f1f1;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 20px;
}
button {
width: 159px;
height: 59px;
border-radius: 123px;
background-color: #000;
color: #fff;
}
index.html:
<footer>
<div class="footer_sec1 container">
<div class="row">
<div class="col">
<img
src="./image/logo_white.png"
alt="The Espresso Emporium Logo"
/>
<h5 class="d-inline-block">The Espresso Emporium</h5>
</div>
<div class="col text-end">
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#product">PRODUCT</a></li>
<li><a href="#location">LOCATION</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</div>
<div class="footer_sec2 text-end container">
<img src="./image/copyright.png" alt="copy right" /><span
>2023 The Espresso Emporium</span
>
</div>
</footer>
style.css:
footer {
background-color: #000;
}
.footer_sec1 ul li {
list-style: none;
margin: 10px 10px;
display: inline-block;
}
.footer_sec1 ul li a {
text-decoration: none;
}
.footer_sec1 h5,
.footer_sec1 ul li a,
.footer_sec2 span {
color: #fff;
}
.footer_sec1 {
padding-top: 20px;
padding-bottom: 70px;
}
.footer_sec1 img {
max-height: 50px;
margin-right: 10px;
}
.footer_sec2 {
border-top: 1px solid #fff;
padding-top: 20px;
padding-bottom: 80px;
}
.footer_sec2 img {
margin-right: 10px;
max-height: 25px;
}
iThome鐵人賽
看影片追技術